<template>
  <div>
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="shops">
        <van-grid :column-num="2">
          <van-grid-item
            @click="$router.push('/shop/product?id=' + item.hash_id)"
            v-for="item in list"
            :key="item.id"
          >
            <img :src="item.cover" alt="" />
            <div id="lists">
              <h3>{{ item.title }}</h3>
              <p>{{ item.sell_point }}</p>
              <h3 class="price">
                <span>￥{{ parseFloat(item.sku_info.price) }}</span
                ><span>￥{{ parseFloat(item.sku_info.market_price) }}</span>
              </h3>
            </div>
          </van-grid-item>
        </van-grid>
      </div>
    </van-list>
  </div>
</template>
<script setup>
import { onActivated, onMounted, ref, watch, watchEffect } from "vue";
import { getShopLists } from "../../API";
import { useRouter, useRoute, onBeforeRouteUpdate } from "vue-router";
import { useCount } from "../../store/index.js";
let store = useCount();
let route = useRoute();
let router = useRouter();
let list = ref([]);
let loading = ref(true);
let finished = ref(false);
let sort_type = ref(1);
watch(
  () => store.params.sort_type,
  (val) => {
    sort_type.value = store.params.sort_type;
    // console.log(val, sort_type.value);
    page = 1;
    list.value = [];
    getShopList();
  }
);
// watchEffect(() => console.log(store.params.sort_type));
onActivated(() => {
  getShopList();
});

//商品列表接口
let page = 1;
let id = route.query.id;

let getShopList = async () => {
  loading.value = true;
  let { data } = await getShopLists({
    page,
    id,
    sort_type: sort_type.value,
  });
  list.value.push(...data.data.list);
  loading.value = false;
  finished.value = !data.data.list.length;

  if (id && sort_type.value == 1) {
    let a = list.value.filter((obj) =>
      Object.values(obj.category_ids).includes(id)
    );
    list.value = a;
    // console.log(list.value);
  }
};
getShopList();

let initRequest = () => {
  page = 1;
  getShopList();
};
onBeforeRouteUpdate(() => {
  list.value = [];
  getShopList();

  // initRequest();
});
// 触底加载
let onLoad = () => {
  page++;
  getShopList();
};
</script>
<style scoped>
.shops {
  width: 100%;
}
.shops img {
  width: 326px;
  height: 326px;
  border-radius: 30px;
}
#lists {
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
}
#lists h3 {
  width: 100%;
  overflow: hidden; /* 隐藏超出高度的内容 */
  display: -webkit-box; /* 将段落视为弹性伸缩盒子 */
  -webkit-line-clamp: 1; /* 设置最大显示行数为2行 */
  -webkit-box-orient: vertical; /* 设置伸缩盒子的排列方向为垂直 */
  text-overflow: ellipsis; /* 显示省略号 */
}
#lists p {
  width: 100%;
  color: #a8a8a8;
  font-size: 26px;
  margin: 20px 0;
  overflow: hidden; /* 隐藏超出高度的内容 */
  display: -webkit-box; /* 将段落视为弹性伸缩盒子 */
  -webkit-line-clamp: 2; /* 设置最大显示行数为2行 */
  -webkit-box-orient: vertical; /* 设置伸缩盒子的排列方向为垂直 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.price {
  width: 100%;
}
.price span:nth-of-type(1) {
  font-weight: bold;
  font-size: 30px;
  color: #f94d5d;
}
.price span:nth-of-type(2) {
  color: #949494;
  text-decoration: line-through;
}
</style>